<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .a {
                width: 100px;
                height: 100px;
                background: red;
                margin-bottom: 10px;
                float: left;
                margin-left: 10px;
            }

            table {
                border-collapse: collapse;
            }

            td {
                border: 2px solid black;
                padding: 5px 10px;
            }

            td:hover {
                border-color: yellow;
                color: white;
                background: blue;
                font-size: 20px;
            }

        </style>
    </head>
    <body>
        
    </body>
</html>
<script>
    // for (var i = 0; i < 30; i++) {
    //     document.write("<div class='a'></div>");
    //     var a = 2;
    //     var b = 3;
    //     for (var j = 0; j < 3; j++) {
    //         console.log(a + b);
    //     }
    // }

    // for (var i = 0; i < 9; i++) {
    //     document.write(i + 1 + " ");
    // }
    // document.write("<br>");
    // for (var i = 0; i < 9; i++) {
    //     document.write(i + 1 + " ");
    // }
    // document.write("<br>");

    // 外层循环控制行数
    // 内层循环控制列数
    // for (var j = 1; j <= 9; j++) {
    //     for (var i = 1; i <= j; i++) {
    //         document.write(i + " * " + j + " = " + i * j + " ");
    //     }
    //     document.write("<br>");
    // }

    document.write("<table>");

    for (var j = 1; j <= 9; j++) {
        document.write("<tr>");

        for (var i = 1; i <= j; i++) {
            document.write("<td>");
            document.write(i + " * " + j + " = " + i * j);
            document.write("</td>");
        }

        document.write("</tr>");

    }

    document.write("</table>");











</script>